/**
 * 添加直角坐标系
 */
function addCoordinate(canvas, fabric) {
  const { width, height } = canvas
  const line1 = new fabric.Line([0, height / 2, width, height / 2], {
    stroke: '#000',
    strokeWidth: 1,
    selectable: false,
  })
  const line2 = new fabric.Line([width / 2, 0, width / 2, height], {
    stroke: '#000',
    strokeWidth: 1,
    selectable: false,
  })
  canvas.add(line1)
  canvas.add(line2)
  // 添加刻度
  for (let i = 0; i < width; i += 100) {
    const line = new fabric.Line([i, 0, i, height], {
      stroke: '#ccc',
      strokeWidth: 1,
      selectable: false,
    })
    canvas.add(line)
  }
  for (let i = 0; i < height; i += 100) {
    const line = new fabric.Line([0, i, width, i], {
      stroke: '#ccc',
      strokeWidth: 1,
      selectable: false,
    })
    canvas.add(line)
  }
  // 添加文字
  for (let i = 0; i < width; i += 100) {
    const text = new fabric.Text(`${i}`, {
      left: i,
      top: height / 2 + 10,
      fontSize: 10,
      selectable: false,
    })
    canvas.add(text)
  }
  for (let i = 0; i < height; i += 100) {
    const text = new fabric.Text(`${i}`, {
      left: width / 2 + 10,
      top: i,
      fontSize: 10,
      selectable: false,
    })
    canvas.add(text)
  }
}

/**
 * 注册键盘事件
 */
function initKeyBoardEvent(canvas, image) {
  window.addEventListener('keydown', (event) => {
    const { key } = event
    switch (key) {
      case 'ArrowLeft':
        moveImage(canvas, image, -10, 0)
        break
      case 'ArrowRight':
        moveImage(canvas, image, 10, 0)
        break
      case 'ArrowUp':
        moveImage(canvas, image, 0, -10)
        break
      case 'ArrowDown':
        moveImage(canvas, image, 0, 10)
        break
      default:
        break
    }
  })
}

/**
 * 移动图片
 */
function moveImage(canvas, image, x, y) {
  const left = image.get('left')
  const top = image.get('top')
  image.set({
    left: left + x,
    top: top + y,
  })
  canvas.renderAll()
}

/**
 * 注册鼠标事件（以鼠标为中心缩放）
 */
function initMouseEvent(canvas) {
  // 监听鼠标滚轮事件 (以为鼠标为中心缩放)
  canvas.on('mouse:wheel', (opt) => {
    let delta = opt.e.deltaY // 滚轮向上滚一下是 -100，向下滚一下是 100
    let zoom = canvas.getZoom() // 获取画布当前缩放值

    // 控制缩放范围在 0.01~20 的区间内
    zoom *= 0.999 ** delta
    if (zoom > 20) zoom = 20
    if (zoom < 0.01) zoom = 0.01

    let backPoint = canvas.getCenterPoint() // 获取画布中心点
    console.log(zoom, 'zoom')
    canvas.zoomToPoint(
      backPoint, // 缩放中心点
      zoom, // 最后要缩放的值
    )
  })
}

/**
 * 初始化图片大小
 * @param {Object} imageDom 图片宽高
 * @param {Object} stageConfig 画布宽高
 */
function initImageSize(imageDom, stageConfig) {
  const { width, height } = imageDom
  console.log('原图大小', width, height)
  const { width: stageWidth, height: stageHeight } = stageConfig
  const scaleX = stageWidth / width
  const scaleY = stageHeight / height
  const scale = Math.min(scaleX, scaleY)
  return {
    width: width * scale,
    height: height * scale,
    scale,
  }
}

/**
 * 给图片添加框选功能
 */
function addSelectBox(canvas, fabric, Vue) {
  console.log(Vue, 'Vue')
  let isDrawing = false
  let startX, startY
  canvas.on('mouse:down', function (o) {
    if (Vue.draggable) return
    if (isDrawing) return
    console.log('mouse:down', isDrawing)
    isDrawing = true
    const pointer = canvas.getPointer(o.e)
    startX = pointer.x
    startY = pointer.y
  })

  // 监听鼠标抬起事件
  canvas.on('mouse:up', function (o) {
    if (Vue.draggable) return
    if (!isDrawing) return
    console.log('mouse:up')
    isDrawing = false
    const pointer = canvas.getPointer(o.e)
    const rect = new fabric.Rect({
      left: Math.min(startX, pointer.x),
      top: Math.min(startY, pointer.y),
      width: Math.abs(pointer.x - startX),
      height: Math.abs(pointer.y - startY),
      fill: 'rgba(0, 0, 255, 0.3)',
      selectable: true,
    })
    if (rect.width < 10 || rect.height < 10) {
      console.log('选区太小')
      return
    }
    canvas.add(rect)
    canvas.setActiveObject(rect)
    canvas.renderAll()
  })
}

export { addCoordinate, initKeyBoardEvent, initMouseEvent, initImageSize }
